<template>
    <div class="ve_container">
        <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="系统背景颜色">
                <el-color-picker
                    v-model="form.backgroundColor"
                ></el-color-picker>
            </el-form-item>
            <el-form-item label="系统颜色选择">
                <el-color-picker v-model="form.textColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="系统字体大小">
                <el-input-number
                    v-model="form.fontSize"
                    :min="10"
                    :max="36"
                ></el-input-number>
            </el-form-item>
            <el-form-item label="系统字体">
                <el-select v-model="form.fontFamily" placeholder="请选择字体">
                    <el-option label="Arial" value="Arial"></el-option>
                    <el-option label="Helvetica" value="Helvetica"></el-option>
                    <el-option label="Verdana" value="Verdana"></el-option>
                    <el-option
                        label="Times New Roman"
                        value="Times New Roman"
                    ></el-option>
                    <el-option
                        label="Courier New"
                        value="Courier New"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存配置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import menu from "@/views/pages/system/components/menu";
import { moduleName } from "@/config";

export default {
    data: () => ({
        description: "系统配置管理",
        buttons: {
            edit: { name: "编辑" },
        },
        // type 0:目录 1：菜单 2：按钮
        type: "1",
        icon: "Stamp",
        name: "系统配置管理",
        parentMenu: menu,
        module: moduleName,
    }),
};
</script>
<script setup>
import { ref } from "vue";

const form = ref({
    backgroundColor: "#ffffff",
    textColor: "#000000",
    fontSize: 14,
    fontFamily: "Arial",
});

const onSubmit = () => {
    console.log("提交的配置:", form.value);
    // 在这里可以添加保存配置的逻辑，例如通过 API 发送到服务器
};
</script>

<style scoped>
.ve_container {
    padding: 20px;
}
.el-form-item {
    margin-bottom: 20px;
}
</style>
